<template>
	<div>
		<el-card>
			<div slot="header" class="df aic jcsb">
				<span>商品分类</span>
				<el-button type="success" class="fff gree" @click="modifyVisible = true">添加分类</el-button>
			</div>
			<el-table
				ref="singleTable"
				:data="tableData"
				highlight-current-row
				style="width: 100%"
			>
				<el-table-column label="序号" type="index" width="50">
				</el-table-column>
				<el-table-column
					label="分类名称"
					width="120"	
				>
				<template slot-scope="{row}">
					<span v-show="!row.isShow">{{row.cateName}}</span>
					<el-input type="text" v-show="row.isShow" v-model="row.cateName"></el-input>
				</template>
				</el-table-column>
				<el-table-column label="是否启用" width="120">
					<template slot-scope="{ row }">
						<el-switch
						:disabled="!row.isShow"
							v-model="row.state"
							active-color="#13ce66"
							inactive-color="#ff4949"
						>
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column property="address" label="操作">
					<!-- 得到表格中的这一行数据 -->
					<template slot-scope="{ row }">
						<el-button
						type="success"
							class="fff gree mrPx-8"
							v-show="!row.isShow"
							@click="row.isShow=true"
							>编辑</el-button
						>
						<el-button v-show="row.isShow" @click="row.isShow=false">取消</el-button>
						<el-button v-show="row.isShow" type="success" class="fff gree" @click="handleEdit(row)">完成</el-button>
						<el-popconfirm
						v-show="!row.isShow"
							class="confirm-del"
							confirm-button-text="确定删除"
							cancel-button-text="取消删除"
							icon="el-icon-info"
							icon-color="red"
							title="您确定要删除此账号吗"
							confirm-button-type="danger"
							@confirm="handleDel(row.id)"
						>
							<el-button slot="reference" type="danger"
								>删除</el-button
							>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<el-pagination class="my-15"
				:current-page="currentPage"
				:page-sizes="[5, 10, 15, 20]"
				:page-size="pageSize"
				layout="total,sizes,prev, pager, next, jumper"
				:total="total"
					@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			>
			</el-pagination>
		</el-card>

		<!-- 添加分类弹窗 -->
		<el-dialog
			title="添加分类"
			:visible.sync="modifyVisible"
			:close-on-click-modal="false"
			@close="handleClear"
		>
			<el-form ref="formdDialog" label-width="80px" :model="classData">
				<el-form-item label="分类名称">
					<el-input clearable v-model="classData.cateName"></el-input>
				</el-form-item>
				<el-form-item label="是否启用">
					<el-switch
						v-model="classData.state"
						active-color="#4cbbad"
						inactive-color="#ff4949"
					>
					</el-switch>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="modifyVisible = false">取 消</el-button>
				<el-button type="success" class="fff gree" @click="ConfirmCate">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { api_goods_catelist,api_goods_addcate,api_goods_editcate,api_goods_delcate } from '@/apis/goods';
	export default {
		data() {
			return {
				tableData: [],
				classData: {
					cateName: "",
					state: false,
				},
				modifyVisible: false,
				currentPage: 1, //前往第几页
				pageSize: 5, //每页显示多少条
				total: 10,
			};
		},
		created(){
        this.getGoodsCate()
		},
		methods: {
			// 关闭弹窗就清空数据
			handleClear() {
				this.classData = this.$options.data().classData;
			},
			// 获取分类列表
			async getGoodsCate(){
				const res=await api_goods_catelist({
					currentPage:this.currentPage,
                    pageSize:this.pageSize
				})
				let {total,data} =res.data;
				// console.log('data',data);
				this.total=total;
				data.forEach(v => {
					v.isShow=false
					v.state=v.state?true:false
				});
				// console.log(data);
				this.tableData=data
				// console.log(this.tableData);
			},
			handleSizeChange(size) {
				this.pageSize = size;
				this.getGoodsCate()
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.getGoodsCate()
			},
			// 添加分类
			async ConfirmCate(){
				const res = await api_goods_addcate({
					cateName:this.classData.cateName,
					state:this.classData.state?1:0
				})	
				if(res.data.code==0){
					this.getGoodsCate();
					this.modifyVisible=false
				}
				console.log('add',res);
			},
			// 编辑
			async handleEdit(row){
            //    row.state=row.state?1:0
			   const res = await api_goods_editcate({...row,state:row.state?1:0})
			   let {code} = res.data
			   if(code==0){
				row.isShow=false;
				// this.getGoodsCate()
			   }
			
			},
			// 删除账号
			async handleDel(id){
                const res=await api_goods_delcate({id})
				if(res.data.code==0){
					 this.getGoodsCate()
				}
				// console.log(res);
			}
			
		},
	};
</script>

<style lang="scss" scoped></style>
